<template>
  <!-- 约看 -->
  <div class="principal">
    <header>
      <div class="return" @click="returns">
        <i class="iconfont icon-zuojiantou"></i>
      </div>
      <div class="title">约看</div>
    </header>
    <main>
      <!-- 选项栏 -->
      <van-tabs
        line-width="50%"
        class="tabs"
        style="height: 60px"
        v-model="active"
      >
        <div class="tabtext">
          <van-tab
            title="未完成的预约"
            style="font-size: 16px; text-align: center"
          >
            <main>
              <div
                class="contents"
                v-for="(item, index) in dataList.list"
                :key="index"
              >
                <div>
                  <img :src="item.imgSrc" alt="" />
                </div>
                <div class="contents1">
                  <span>{{ item.booking }}</span>
                  <ul>
                    <li>{{ item.region }}</li>
                    <li>{{ item.type }}</li>
                    <li>{{ item.advantage }}</li>
                  </ul>
                  <div class="contents1_1">
                    <div>{{ item.rent }}</div>
                    <span>{{ item.money }}</span>
                  </div>
                </div>
              </div>
            </main>
          </van-tab>
          <van-tab
            title="已完成的预约"
            style="font-size: 16px; text-align: center"
          ></van-tab>
        </div>
      </van-tabs>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",
      result: [],
      dataList: {
        list: [
          {
            imgSrc: "",
            booking: "预约时间",
            region: "北京香格里拉",
            type: "1室1厅",
            advantage: "距离地铁站1米",
            rent: "整租",
            money: "2000元/月",
          },
        ],
      },
    };
  },
   methods:{
  //跳转
     returns(){
         this.$router.push('/my')
     }
  }
};
</script>
        
<style  lang="less" scoped>
.principal {
  height: 1334px;
  background: #ededed;
  font-size: 40px;
  header {
    width: 100%;
    height: 88px;
    background-color: #ff5654;
    display: flex;
    .return {
      margin-left: 20px;
      i {
        color: #fff;
        font-size: 34px;
        line-height: 88px;
      }
    }
    .title {
      padding: 0 290px;
      color: #fff;
      font-size: 36px;
      line-height: 88px;
    }
  }
  main {
    .tabtext {
      height: 60px;
      font-size: 40px;
    }
    .van-tab__pane {
      padding-top: 15px;
    }
    .tabs {
      height: 60px;
      main {
        .contents {
          text-align: left;
          background-color: #fff;
          display: flex;

          padding: 20px 15px 15px 20px;
          margin: 15px 20px;

          img {
            width: 290px;
            height: 198px;
          }
          .contents1 {
            span {
              font-size: 30px;
              color: #ff5555;
            }
            li:nth-child(1) {
              font-size: 25px;
            }
            li:nth-child(2) {
              font-size: 15px;
            }
            li:nth-child(3) {
              font-size: 14px;

              opacity: 0.8;
            }

            margin-left: 18px;
            .contents1_1 {
              margin-top: 29px;
              display: flex;
              font-size: 13px;
              div {
                font-size: 10px;
                color: #618698;
                text-align: center;
                width: 70px;
                height: 30px;
                border: 1px solid #618698;
                line-height: 30px;
                border-radius: 5px;
              }
              span {
                color: #ff5555;
                margin-left: 100px;
              }
            }
          }
        }
        .van-cell-group--inset {
          margin-top: 30px;
          border-radius: 0;
        }
      }
    }
  }
}
</style>